<template>
    <base-dialog v-bind="$attrs" v-on="$listeners" title="预览会议室" size="large"
                 :noButton="urlList.length<=1">
        <div class="PSViewer" ref="psvdbg" id="viewer"></div>
        <template slot="footer">
            <el-button @click="change">切换图片</el-button>
        </template>
    </base-dialog>
</template>
<script>
    import BaseDialog from "@/components/Common/BaseDialog";
    import {Viewer} from 'photo-sphere-viewer';
    import 'photo-sphere-viewer/dist/photo-sphere-viewer.css'

    export default {
        components: {BaseDialog},
        props:{
            url:{
                type:String,
                default:""
            },
            isList:{
                type:Boolean,
                default:true
            }
        },
        data() {
            return {
                imgLoading: false,
                urlList: [],
                index: 0,
                PSV: undefined
            }
        },
        created() {
            this.urlList = []
            if(this.isList){
                let _list = this.url.split(",")
                for (let i = 0; i < _list.length; i++) {
                    this.urlList.push(process.env.VUE_APP_BASE_API + _list[i])
                }
            }else {
                this.urlList.push(this.url)
            }
            console.log("this.urlList",this.urlList)
        },
        mounted() {
            this.$nextTick(function () {
                this.init()
            })
        },
        methods: {
            change() {
                this.index++
                if (this.index >= this.urlList.length) this.index = 0
                if (this.PSV) {
                    this.PSV.destroy()
                }
                this.init()

            },
            init: function () {
                this.PSV = new Viewer({
                    container: document.querySelector('#viewer'),
                    panorama: this.urlList[this.index],
                });
            },
        }
    }
</script>
<style lang="scss" scoped>
    #viewer {
      width: 100%;
      height: 100%;
    }
</style>
